<template>
  <el-dialog
    :title="title"
    :visible.sync="showOpen"
    :width="dialogWidth"
    append-to-body>

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">

      <el-form-item v-for="row in listColumns" v-if="row.isSearch" :label="row.title" :prop="row.key" >
        <el-input
          v-model="queryParams[row.key]"
          :placeholder="`请输入${row.title}`"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      :data="dataList"
      @row-click="clickRow"
      @selection-change="handleSelectionChange"
      ref="table"
      stripe
      style="width: 100%">
      <el-table-column v-if="multiple" type="selection" width="55" align="center" />
      <el-table-column v-for="item in destColumns"
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        :formatter="(row, column,cellValue) => dictFormat(cellValue,item)"
      >
      </el-table-column>

      <el-table-column align="right" v-if="!multiple">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="rowClick(scope.$index, scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div slot="footer" class="dialog-footer" v-if="multiple">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>

  </el-dialog>

</template>

<script>
  import request from '@/utils/request'

  export default {
    //通用的放大镜组件
    name:'TableSelect',
    data() {
      return {
        showOpen:false,
        // 选中数组
        ids: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        dataList: [],
        destColumns:[],
        currentSelection:[]
      }
    },
    created() {

    },
    mounted() {
      let me = this;
      me.destColumns = [];
      me.listColumns.map(function(item,index){
        me.generateColumn(item)
        me.destColumns.push(item);
      });
    },
    methods:{
      show(){
        this.showOpen = true;
        if(this.load){
          this.getList();
        }

      },
       generateColumn(item){
        if(item.typeCode){
          this.getDicts(item.typeCode).then(response => {
            item['options'] = response.data
          });
        }
      },
      getList(){
        let me = this;
        let params = Object.assign(me.queryParams,me.defaultParam);
        let res = request({url: me.gridUrl,method: 'get',params: params})
        res.then(response => {
          me.dataList = response.rows;
          me.total = response.total;
        });
      },
      handleQuery(){
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleSelectionChange(selection) {
        this.currentSelection = selection;
      },
      rowClick(index,row){
        this.$emit("rowClick",index,row);
        this.handleClose();
      },
      clickRow(row) {
        this.$refs.table.toggleRowSelection(row);
      },
      handleClose(){
        this.showOpen = false;
      },
      dictFormat(cellValue, item){
        if(item.typeCode){
          return this.selectDictLabel(item.options, cellValue);
        }else{
          return cellValue;
        }
      },
      submitForm(){
        this.$emit("changSelection",this.currentSelection);
        this.handleClose();
      }
    },
    props: {
      'listColumns': {
        type: Array
      },
      'gridUrl': {
        type: String
      },
      'defaultParam': {
        type: Object,
        default: () => ({})
      },
      'data': {
        type: Array
      },
      //弹出层标题
      'title':{
        type: String,
        default:''
      },
      'multiple':{
        type: Boolean,
        default: false
      },
      'showSearch':{
        type: Boolean,
        default: true
      },
      'dialogWidth':{
        type:String,
        default:'700px'
      },
      'load':{
        type: Boolean,
        default: true
      },
    }
  }
</script>
